<script setup>
import ShopScrollView from '@/views/home/components/ShopScrollView.vue'
import ShopPriceScrollView from '@/views/home/components/ShopPriceScrollView.vue'
import HomeShopList from '@/views/home/components/HomeShopList.vue'
import router  from '@/router/index'


const images = [
    'https://img.zcool.cn/community/01ec135715ec1532f8758c9bda3bc5.jpg@1280w_1l_2o_100sh.jpg',
    'https://img.zcool.cn/community/01ec135715ec1532f8758c9bda3bc5.jpg@1280w_1l_2o_100sh.jpg',
    'https://img.zcool.cn/community/01ec135715ec1532f8758c9bda3bc5.jpg@1280w_1l_2o_100sh.jpg',
    'https://img.zcool.cn/community/01ec135715ec1532f8758c9bda3bc5.jpg@1280w_1l_2o_100sh.jpg'
]
// 跳转到搜索
const onSeaarch = ()=>{
    router.push('search')
}
// 跳转到我喜欢的
const onMyLike = ()=>{
    router.push('myLike')
}
// 跳转到服务说明
const onServerTell = ()=>{
    router.push('serverTell')
}
// 点击了热卖单品某一个item
const onHandlerDidClickItem = (item) =>{
    console.log('点击了热卖单品某一个item')
    console.log(item)
    pushShopDetail(item)
}
// 点击热门配搭的更多
const onHandlerRememberClickMore = () =>{
    console.log('点击热门配搭的更多')
}
// 点击热门配搭的item
const onHandlerRememberClickItem = (item) =>{
    console.log('点击热门配搭的item')
    console.log(item)
    router.push({
        name:'chuanDa',
        query:{'id':item}
    })
}
// 点击了带价格的scr-item
const onHandlerPriceClickItem = (item) =>{
    console.log('点击了带价格的scr-item')
    console.log(item)
    pushShopDetail(item)
}
// 点击了带价格的更多
const onHandlerPriceMore = () =>{
    console.log('点击了带价格的更多')
}

// 点击了六张大图片的某一张
const onClickBigImage = (item)=> {
    console.log('点击了六张大图片的某一张')
    console.log(item)
    pushShaiXuan(item)
}
// 点击了只有一张图的vue
const onClickOnlyBigImage = ()=> {
    console.log('点击了只有一张图的vue')
    pushShaiXuan('big')
}
// 点击轮播图某一张
const swiperDidClick = (item) => {
    console.log('点击轮播图某一张')
    console.log(item)
    pushShaiXuan('swiper')
}

// 跳转到 筛选
const pushShaiXuan = (type) =>{
    router.push({
        name:'ShaiXuan',
        query:{'id':type}
    })
}

// 跳转到商品详情
const pushShopDetail = (item)=>{
    router.push({
        name:'ShopDetail',
        query:{'id':item}
    })
}
</script>

<template>
   <!-- nav -->
  <div class="nav">
    <strong class="title">CEMA<span class="title_red">ROSE</span></strong>
    <van-icon @click="onSeaarch" class="search" name="search" />
  </div>
    
  <!-- body -->
    <div class="main">
        <!-- swiper -->
        <van-swipe 
        :autoplay="3000" 
        lazy-render 
        show-indicators='none'>
            <van-swipe-item v-for="image in images" :key="image" @click="swiperDidClick(image)">
                <img :src="image" />
        </van-swipe-item>
        </van-swipe>

        <!-- 新单品 -->
        <van-grid>
            <van-grid-item icon="photo-o" text="最新单品" />
            <van-grid-item icon="photo-o" text="发现新鲜" />
            <van-grid-item icon="photo-o" text="我喜欢的" @click="onMyLike" />
            <van-grid-item icon="photo-o" text="服务说明" @click="onServerTell"/>
        </van-grid>

        <!-- - 搭配推荐 - -->
        <ShopScrollView 
        class="recommend-shop" 
        @didClickMore="onHandlerRememberClickMore" 
        @didClickItem="onHandlerRememberClickItem" 
        />

        <!-- - 推片转区 - -->
        <van-image
        width="100%"
        height="240"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        @click="onClickOnlyBigImage"
        />

        <!-- - 推片转区 - -->
        <ShopPriceScrollView 
        class="recommend-price" 
        @didClickItem="onHandlerPriceClickItem"
        @didClickMore="onHandlerPriceMore"
        />

        <!-- - 推片转区 - -->
        <van-image v-for="item in 6" :key="item"
        width="100%"
        height="240"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        @click="onClickBigImage(item)"
        />

        <HomeShopList :showTitle="true" class="list" @didClickItem="onHandlerDidClickItem"/>
    </div>
</template>

<style lang="scss" scoped>
.nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 90px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .title {
        display: block;
        font-size: 20px;
        color: #333;
        font-weight: 400;
        margin-left: 10px;
        margin-top: 60px;
        .title_red {
        font-size: 20px;
        color: orangered;
        }
    }

    .search{
        margin-top: 60px;
        margin-right: 10px;
        font-size: 20px;
        color: orangered;
    }
    

}

.main {
    // TODO:
    margin-top: 90px;
    //margin-bottom: 100px;
    padding-bottom: 100px;
    

    .scr {
        background-color: red;
        display: flex;
    }

    .recommend-shop {
        height: 160px;
    }

    .recommend-price {
        height: 120px;
    }
}

.list {
    min-height: 40px;
    display: flex;
}
</style>